<template>
  <div class="settings-container">
    <div class="settings-sidebar">
      <el-menu
        :default-active="activeMenu"
        class="settings-menu"
        background-color="#304156"
        text-color="#fff"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/settings/directories">
          <el-icon><Folder /></el-icon>
          <span>目录管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    
    <div class="settings-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { Folder } from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.settings-container {
  display: flex;
  height: 100%;
  background-color: #f0f2f5;
}

.settings-sidebar {
  width: 240px;
  background-color: #304156;
  height: 100%;
  overflow-y: auto;
}

.settings-menu {
  border-right: none;
}

.settings-menu :deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
}

.settings-menu :deep(.el-menu-item.is-active) {
  background-color: #263445 !important;
}

.settings-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style> 